<!--地区销量排行-->
<template>
    <div class="com-container">
        <div class="com-chart" ref="rank_ref"></div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "Rank",
        data() {
            return {
                chartInstance:null,
                allData:null,
                startValue: 0,//区域缩放的起点值
                endValue: 4,//区域缩放的终点值
                timerId:null,//定时器标识
            }
        },
        created(){
            //注册回调函数
            this.$socket.registerCallBack("rankData",this.getData);
        },
        mounted(){
            this.initChart();
            //this.getData();
            //发送数据给服务器，告诉服务器，我现在需要数据
            this.$socket.send({
                action:'getData',
                socketType:'rankData',
                chartName:'rank',
                value:''
            });
            window.addEventListener('resize',this.screenAdapter);
            //在页面加载完成忠厚，主动进行屏幕的适配
            this.screenAdapter();
        },
        destroy(){
            //在组件销毁的时候，将窗口监听器取消掉
            window.removeEventListener('resize',this.screenAdapter);
            clearInterval(this.timerId);
            this.$socket.unRegisterCallBack("rankData")
        },
        methods: {
            //初始化echartInstance对象
            initChart(){
                this.chartInstance=this.echarts.init(this.$refs.rank_ref,this.theme);
                const initOption={
                    title:{
                        text:'┃ 地区去向排行',
                        left:20,
                        top:20,
                    },
                    grid:{
                        top:'40%',
                        left:'5%',
                        right:'5%',
                        bottom:'5%',
                        containLabel:true
                    },
                    tooltip:{
                        show:true
                    },
                    xAxis: {
                        type:'category'
                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[
                        {
                            type:'bar'
                        }
                    ]
                };
                this.chartInstance.setOption(initOption);

                //对图表进行鼠标事件的监听
                this.chartInstance.on('mouseover',()=>{
                    clearInterval(this.timerId);
                });
                this.chartInstance.on('mouseout',()=>{
                    this.startInterval();
                });
            },
            //获取服务器数据
            getData(ret){
                /*await this.axios.get("/chart/rank").then(res=>{
                    this.allData=res.data;
                });*/
                this.allData=ret;
                //对allData中的数据从大到小进行排序
                this.allData.sort((a,b)=>{
                    return b.value-a.value;
                });
                this.updateChart();
                this.startInterval();
                //this.startTestTime();
            },
            //处理数据
            updateChart(){
                const colorArr = [
                    ['#0BA82C', '#4FF778'],
                    ['#2E72BF', '#23E5E5'],
                    ['#5052EE', '#AB6EE5']
                ];
                //所有地区形成的数组
                const RegionArr=this.allData.map(item=>{
                   return item.name
                });
                //所有地区对应额销售金额
                const ValueArr=this.allData.map(item=>{
                    return item.value
                });
                const dataOption={
                    xAxis:{
                        data:RegionArr
                    },
                    dataZoom:{
                        show:false,
                        startValue:this.startValue,
                        endValue:this.endValue,
                    },
                    yAxis:{

                    },
                    series: [
                        {
                            data:ValueArr,
                            itemStyle:{
                                //不同销量不同的颜色渐变
                                color: arg=> {
                                    let targetColorArr=null;
                                    if (arg.value > 300){
                                        targetColorArr=colorArr[0];
                                    }else if (arg.value > 200) {
                                        targetColorArr=colorArr[1];
                                    }else {
                                        targetColorArr=colorArr[2];
                                    }
                                    return new this.echarts.graphic.LinearGradient(0,0,0,1,[
                                        {
                                            offset:0,
                                            color:targetColorArr[0]
                                        },
                                        {
                                            offset:1,
                                            color:targetColorArr[1]
                                        },
                                    ])
                                }
                            }
                        }
                    ]
                };
                this.chartInstance.setOption(dataOption);
            },
            //当浏览器的大小发生变化的时候，调用该方法，来完成屏幕的适配
            screenAdapter(){
                const titleFontSize=this.$refs.rank_ref.offsetWidth/100*3.6;
                //和分辨率大小相关的配置项
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:titleFontSize
                        }
                    },
                    series:[
                        {
                            barWidth:titleFontSize,
                            itemStyle: {
                                barBorderRadius:[titleFontSize/2,titleFontSize/2,0,0]
                            }
                        }
                    ]
                };
                this.chartInstance.setOption(adapterOption);
                //手动的调用图表的resize方法
                this.chartInstance.resize();
            },
            startInterval() {
                if (this.timerId) {
                    clearInterval(this.timerId);
                }
                this.timerId=setInterval(()=>{
                    this.startValue++;
                    this.endValue++;
                    if (this.endValue > this.allData.length - 1) {
                        this.startValue=0;
                        this.endValue=4;
                    }
                    this.updateChart();
                },2000);
            },
            /*startTestTime(){
                this.testTime=setInterval(()=>{
                    this.axios.get("/chart/rank").then(res=>{
                        this.allData=res.data;
                    });
                },1000);
                this.updateChart();
            }*/
        },
        computed:{
            ...mapState(['theme'])
        },
        watch:{
            theme(){
                //console.log("主题切换");
                this.chartInstance.dispose();//销毁当前图表
                this.initChart();//以切换后的主题显示图表
                this.screenAdapter();//完成屏幕适配
                this.updateChart();//更新图表的展示
            }
        }
    }

</script>

<style scoped>
    .com-container{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;

    }
    .com-chart{
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
</style>
